<template>
  <div class="yunqi">
    <div class="outcontianer">
      <div class="header">
        <!--    <div class="headerDivIndex"></div> -->
        <!--<h5>设置设备信息</h5>-->
        <div  class="aui-bar aui-bar-nav" style="position: fixed;top:0;background: rgba(40,138,240,0)">
          <!--<a class="aui-pull-left" style="margin-top: 1.25rem" @click="goBack()">-->
          <!--<img style="padding:48% 0" src="../img/wLeft.png" alt="">-->
          <!--</a>-->
          <div class="aui-title">
            <p> <br /></p>
            <div class="ConnectStatus"  v-if="ConnectStatus==false"> 正在连接中 </div>
            <div class="ConnectStatus"  v-if="zaozuo==true"> 已着座 </div>
            <div class="ConnectStatus"  v-if="zaozuo==false"> 未着座 </div>
            <!--<div class="ConnectStatus" v-if="ConnectStatus==false"> {{cleanMode}} </div>-->
          </div>
        </div>

      </div>
      <section class="actions">
        <div class="cover" >
          <!-- <div  class="aui-bar aui-bar-nav aui-barPailua" style="position: fixed;top:0;background: rgba(0,0,0,0)">
            <a class="aui-pull-left" style="margin-top: 1.25rem;    padding: 1rem 2rem !important;" @click="goBack()">
              <img style="padding:48% 0" src="../img/wLeft.png" alt="">
            </a>
            <div class="aui-title"><span>小普超能马桶盖</span></div>
          </div> -->
          <div  class="circleBg">  <!--动态效果新增-->
            <img class="img1aaa" src="../img/charmAnimation/animation/image_gif_01.png" alt="">
            <img class="img2aaa" src="../img/charmAnimation/animation/image_gif_02.png" alt="">
            <img class="img3aaa" src="../img/charmAnimation/animation/image_gif_03.png" alt="">
          </div>

            <!--<img v-if="opclassName==''" id="covImgIn" :src="srcImgPath" v-bind:class="opclassName">-->
            <!--<img v-if="opclassName!==''" id="covImgIn" :src="srcImgPath" v-bind:class="opclassName">-->

          <div id="covImgIn" :class="opclassName"></div>

        </div>
      </section>
    </div>
    <div class="textColor"  style="background: #fff;">
      <div v-if="statusName==false" class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10">
        <div class="aui-list-item-right">
          <div class="aui-range" style="width:100%;padding:0 5% 0 5%;" >
            <input v-if="isIOS==false" disabled :style="{ backgroundSize: preGun +'% 100%' }" type="range" ref="aui-range" class="aui-range" v-model="CtrlState"  max="50" min="0"  @touchstart="start" @touchmove="move" @touchend="end"  id="range"  style="width:100%" />
            <input v-if="isIOS==true"  :style="{ backgroundSize: preGun +'% 100%' }" type="range" ref="aui-range" class="aui-range" v-model="CtrlState"  max="50" min="0"  @touchstart="start" @touchmove="move" @touchend="end"  id="range"  style="width:100%" />
            <!--<input v-if="NowchooseName==''" disabled :style="{ backgroundSize: preGun +'% 100%' }" type="range" ref="aui-range" class="aui-range" v-model="CtrlState" max="50" min="0" step="10" id="range"  style="width:100%" />-->
          </div>
        </div>
      </div>
      <div v-if="statusName==true" class="aui-list-item-inner aui-padded-t-10 aui-padded-b-10">
        <div class="aui-list-item-right">
          <div class="aui-range" style="width:100%;padding:0 5% 0 5%;" >
            <input v-if="isIOS==false" :style="{ backgroundSize: preGun*5/2 +'% 100%' }" type="range" disabled ref="aui-range" class="aui-range" v-model="CtrlState" max="20" min="0"  id="range"  @touchstart="start" @touchmove="move" @touchend="end"  style="width:100%" />
            <input v-if="isIOS==true" :style="{ backgroundSize: preGun*5/2 +'% 100%' }" type="range" ref="aui-range" class="aui-range" v-model="CtrlState" max="20" min="0"  id="range"  @touchstart="start" @touchmove="move" @touchend="end"  style="width:100%" />
          </div>
        </div>
      </div>
      <div style="clear: both"></div>
      <div class="action-plan" >
        <div v-if="statusName==false" class="aui-flex-col aui-flex-item-12 aui-text-center">
          <div class="aui-flex-item-2">1</div>
          <div class="aui-flex-item-2">2</div>
          <div class="aui-flex-item-2">3</div>
          <div class="aui-flex-item-2">4</div>
          <div class="aui-flex-item-2">5</div>
          <div class="aui-flex-item-2">6</div>
        </div>
        <div v-if="statusName==true" class="aui-flex-col aui-flex-item-12 aui-text-center">
          <div class="aui-flex-item-2">1</div>
          <div class="aui-flex-item-8" style="color: #ffffff;opacity: 0.8;">2</div>
          <div class="aui-flex-item-2">3</div>
        </div>
        <div style="clear: both"></div>
        <div class="aui-flex-col aui-flex-item-12 aui-padded-b-15 aui-text-center">
          <div class="divide" @click="thermImage('zuoDianWenDu')">
            <!--	<div class="roundDiv">-->
            <div :style="roundDivStyle[0]" class="roundDiv">
              <img class="imgCenter" src="../../../../static/img/function/charm/unselected/icon_zuodianwendu.png" alt="">
            </div>
            <div v-if="zuoDianWenDu==false" class="aui-grid-label"> 坐垫温度</div>
            <div v-if="zuoDianWenDu==true" class="aui-grid-label textColor-Bluerrr"> 坐垫温度</div>
          </div>
          <div class="divide" @click="thermImage('shuiWen')">
            <div class="roundDiv" :style="roundDivStyle[1]">
              <img class="imgCenter" src="../../../../static/img/function/charm/unselected/icon_shuiwen.png" alt="">
            </div>
            <div v-if="shuiWen==false" id="shuiWenDiv" class="aui-grid-label"> 水温</div>
            <div v-if="shuiWen==true" class="aui-grid-label textColor-Bluerrr"> 水温</div>
          </div>
          <div class="divide" @click="thermImage('penZuiWeiZhi')">
            <div class="roundDiv" :style="roundDivStyle[2]">
              <img  class="imgCenter" src="../../../../static/img/function/charm/unselected/icon_penzuiweizhi.png" alt="">
            </div>
            <div v-if="penZuiWeiZhi==false" id="penZuiWeiZhiDiv" class="aui-grid-label"> 喷嘴位置</div>
            <div v-if="penZuiWeiZhi==true" class="aui-grid-label textColor-Bluerrr"> 喷嘴位置</div>
          </div>
          <div class="divide" @click="thermImage('hongGanWenDu')">
            <div class="roundDiv" :style="roundDivStyle[3]">
              <img class="imgCenter" src="../../../../static/img/function/charm/unselected/icon_honggan.png" alt="">
            </div>
            <div v-if="hongGanWenDu==false" id="hongGanWenDuDiv" class="aui-grid-label"> 烘干温度</div>
            <div v-if="hongGanWenDu==true" class="aui-grid-label textColor-Bluerrr"> 烘干温度</div>
          </div>
          <div class="divide" @click="thermImage('shuiYa')">
            <div class="roundDiv" :style="roundDivStyle[4]">
              <img class="imgCenter" src="../../../../static/img/function/charm/unselected/icon_shuiya.png" alt="">
            </div>
            <div v-if="shuiYa==false" id="shuiYaDiv" class="aui-grid-label"> 水压</div>
            <div v-if="shuiYa==true" class="aui-grid-label textColor-Bluerrr"> 水压</div>
          </div>
        </div>
        <div style="clear: both"></div>
        <!--<div class="itemList">-->
      </div>
      <div class="aui-grid">
        <div class="aui-row">
          <div class="listBorder" @click="changeImage('tunXi')">
            <div class="list-table">
              <img v-if="tunXi==false" src="../../../../static/img/function/charm/unselected/tunXi.png" alt="">
              <img v-if="tunXi==true" src="../../../../static/img/function/charm/checked/tunXi.png" alt="">
              <div  v-if="tunXi==false"  class="aui-grid-label gridLabel" >臀洗</div>
              <div  v-if="tunXi==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >臀洗</div>
            </div>

          </div>
          <div class="listBorder " @click="changeImage('fuXi')">
            <div class="list-table">
              <img v-if="fuXi==false" src="../../../../static/img/function/charm/unselected/fuXi.png" alt="">
              <img v-if="fuXi==true" src="../../../../static/img/function/charm/checked/fuXi.png" alt="">
              <div v-if="fuXi==false" id="fuXiDiv" class="aui-grid-label gridLabel">妇洗</div>
              <div  v-if="fuXi==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >妇洗</div>
            </div>

          </div>
          <div class="listBorder "  style="border-right:none" @click="changeImage('tongBian')">
            <div class="list-table">
              <img v-if="tongBian==false" src="../../../../static/img/function/charm/unselected/tongBian.png" alt="">
              <img v-if="tongBian==true" src="../../../../static/img/function/charm/checked/tongBian.png" alt="">
              <div v-if="tongBian==false" id="tongBianDiv" class="aui-grid-label gridLabel">通便</div>
              <div  v-if="tongBian==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >通便</div>
            </div>

          </div>
          <div class="listBorder" v-bind:class="ActiveWanfu" id="wangFuAnMoCh" @click="changeImage('wangFuAnMo')">
            <div class="list-table">
              <img v-if="wangFuAnMo==false"  src="../../../../static/img/function/charm/unselected/wangFuAnMo.png" alt="">
              <img v-if="wangFuAnMo==true"  src="../../../../static/img/function/charm/checked/wangFuAnMo.png" alt="">
              <div v-if="wangFuAnMo==false" id="wangFuAnMoDiv" class="aui-grid-label gridLabel">往复按摩</div>
              <div  v-if="wangFuAnMo==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >往复按摩</div>
            </div>
          </div>
          <div class="listBorder " @click="changeImage('hongGan')">
            <div class="list-table">
              <img v-if="hongGan==false" src="../../../../static/img/function/charm/unselected/hongGan.png" alt="">
              <img v-if="hongGan==true" src="../../../../static/img/function/charm/checked/hongGan.png" alt="">
              <div v-if="hongGan==false" id="hongGanDiv" class="aui-grid-label gridLabel">烘干</div>
              <div  v-if="hongGan==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >烘干</div>
            </div>
          </div>
          <div class="listBorder" style="border-right:none" @click="changeImage('wuHua')">
            <div class="list-table">
              <img v-if="wuHua==false" src="../../../../static/img/function/charm/unselected/wuHua.png" alt="">
              <img v-if="wuHua==true" src="../../../../static/img/function/charm/checked/wuHua.png" alt="">
              <div v-if="wuHua==false" id="wuHuaDiv" class="aui-grid-label gridLabel">雾化护理</div>
              <div  v-if="wuHua==true"  class="aui-grid-label gridLabel textColor-Bluerrr" >雾化护理</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <QhLoading v-if="showLoading" :alertText="alertText" ></QhLoading>

    <addtoAlert v-if="showAddtoAlert"></addtoAlert>
    <LoadingInit v-if="showAlertState"></LoadingInit>
    <connectinit v-if="ConnectStatus==false"></connectinit>
    <zzAlert v-if="alertZZ" @closeTip="closeTip"></zzAlert>
    <WanfanAlter v-if="IsWanfanAlter" @closeTipW="closeTipW"></WanfanAlter>
    <shuiwenAlert v-if="IsshuiwenAlert" @closeTipShuiw="closeTipShuiw"></shuiwenAlert>

    <shuiwenTongbianAlert v-if="IsshuiwenTongbianAlert" @closeTipShuiwTongbian="closeTipShuiwTongbian"></shuiwenTongbianAlert>
  </div>
</template>
<script>
  class CovImg {
    constructor (el) {
      this.covImgIn = document.getElementById(el)
    }

    getwangFuAnMoCh(){
      this.wangFuAnMoCh = document.getElementById('wangFuAnMoCh')
    }
  }
  import {mapMutations, mapState} from 'vuex'
  import Alert from '../../common/Alert'
  import {Register} from '../../../store/lib'
  import ZjLoading from '../../common/ZjLoading'
  import LoadingInit from '../../common/LoadingInit'
  import shuiwenAlert from '../../common/shuiwenAlert'
  import shuiwenTongbianAlert from '../../common/shuiwenTongbianAlert'

  import zzAlert from '../../common/zzAlert'
  import connectinit from '../../common/connectinit'
  import WanfanAlter from '../../common/WanfanAlter'
  import addtoAlert from '../../common/addtoAlert'
  import QhLoading from '../../common/QhLoading'
  import avatarweiZZ from '../../../../static/img/status/未着座.png'
  import avataryiZZ from '../../../../static/img/status/已着座.png'

  import tunxiPng from  '../../../../static/img/charmAnimation/tunXi/tunXi1.png'
  import fuxiPng from  '../../../../static/img/charmAnimation/fuXi/fuXi1.png'
  import tongBianPng from  '../../../../static/img/charmAnimation/tongBian/tongBian1.png'
  import wangFuAnMoPng from  '../../../../static/img/charmAnimation/wangFuAnMo/wangFuAnMo1.png'
  import hongGanPng from  '../../../../static/img/charmAnimation/hongGan/hongGan1.png'
  import wuHuaPng from  '../../../../static/img/charmAnimation/wuHua/wuHua1.png'

  export default {
    name: 'CtrlMain',
    data () {
      return {
        IsshuiwenTongbianAlert:false,
        shuiWennum:0,
        startData: 0,

        IsshuiwenAlert:false,
        isIOS:false,
        qieHuanCheck:false,
        initSetIng:false,
        IsInitNum:false,
        zuoDianWenDuNum:0,
        shuiWenNum:0,
        penZuiWeiZhiNum:0,
        hongGanWenDuNum:0,
        shuiYaNum:0,

        isTowriteT:true,
        srcImgPath:avatarweiZZ,
        IsZZyC:false,
        showAddtoAlert:false,
        whichOp:'',
        exitTime:0,
        IsWanfanAlter:false,
        ActiveWanfu:"",
        statusName:false,
        alertZZ:false,
        zaozuo: false,
        IsToWrite: true,
        LastCtrlState: 0,
        NowchooseName: '',
        showLoading:false,

        opclassName: '',
        tunXi: false,
        fuXi: false,
        tongBian: false,
        wangFuAnMo: false,
        hongGan: false,
        wuHua: false,

        zuoDianWenDu:false,
        shuiWen:false,
        penZuiWeiZhi:false,
        hongGanWenDu:false,
        shuiYa:false,
        CtrlState:0,

        isWatchChange:true,
        alertText: null, //提示的内容
        imgSrc: '',
        textColorBlue: 'textColor-Bluerrr',
        preGun: 0,
        roundDivStyle: [

          {border: ""},{border: ""},{border: ""},{border: ""},{border: ""}

        ]
      }
    },
    created(){
      window.hilink.setTitleVisible(true)
    },
    mounted () {
      var u = navigator.userAgent
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isiOS === true) {
        this.isIOS = true
      }

      var self = this
      window.checkConnect = function(){
        if(self.ConnectStatus==false) {
          self.showAddtoAlert = true
        }
      }
      window.initDataWindows = function(){
        self.initData()
      }
      window.SetTimeOUTc = setTimeout("checkConnect()",30000)
      // window.checkshowAlertState = function(){
      //   if(self.showAlertState==true) {
      //     self.showAddtoAlert = true
      //   }
      // }
      // window.SetTimeOUTc = setTimeout("checkshowAlertState()",25000)

      window.checkQHFun = function(){
        this.qieHuanCheck = false
        this.qieHuanCheckSetTime = true
      }

      window.setIsWrite = function () {
        self.isTowriteT = true
        clearTimeout(window.setIsWriteNuM)
      }

    },
    components: {
      shuiwenTongbianAlert,
      shuiwenAlert,
      QhLoading,
      addtoAlert,
      WanfanAlter,
      connectinit,
      zzAlert,
      LoadingInit,
      ZjLoading,
      Alert
      // Loading
    },
    computed:{
      ...mapState([
        'deviceIdStore',
        'showAlertState',
        'ConnectStatus',
        'stateEnd',
        'connectEnd',
        'stateData',
        'startAddr'
      ])
    },
    watch: {
      connectEnd (val) {
        this.stateEnd = val
        // alert('读取数据')
        // this.WTGSTATE()
      },
      ConnectStatus(val){
        if(this.ConnectStatus==true) {
          this.showAddtoAlert = false
        }
        clearTimeout(window.SetTimeOUTc)
        var self = this
        if(this.ConnectStatus==false) {
          window.eqTime = function(){
            var now = new Date()
            if (now.getTime() > self.exitTime){
              if(self.ConnectStatus==false) {
                self.showAddtoAlert = true
              }
              clearInterval(window.ADDTOOut)
            }
          }

          var numberMillis = 30000
          var now = new Date()
          this.exitTime = now.getTime() + numberMillis
          clearInterval(window.ADDTOOut)
          window.ADDTOOut = setInterval("window.eqTime()",500)
        }
      },
      stateEnd(val){
        this.stateEnd = val
        // alert('解析数据')
        this.initData()
      },
      click(){
        alert('aa')
      },
      whichOp(val){

        if (this.zaozuo==true) {
          if(this.whichOp=="") {

          } else {
          }
        }
      },
      // CtrlState(val){
      //   // this.$refs.aui-range.style.style. =val*20+"% 100%"
      //   this.preGun = val * 2
      //
      //   if(this.isTowriteT==true) {
      //       if (this.NowchooseName === 'zuoDianWenDu') {
      //         if(this.initSetIng==true) {
      //           this.initSetIng = false
      //           return
      //         }
      //         this.zuoDianWenDuNum = val
      //         this.setRegister4HighValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
      //       } else if (this.NowchooseName === 'penZuiWeiZhi') {
      //         this.penZuiWeiZhiNum = val
      //         this.setRegister4LowValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
      //       } else if (this.NowchooseName === 'shuiWen') {
      //         this.shuiWenNum = val
      //         this.setRegister4HighValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
      //       } else if (this.NowchooseName === 'hongGanWenDu') {
      //         this.hongGanWenDuNum = val
      //         this.setRegister4LowValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
      //       } else if (this.NowchooseName === 'shuiYa') {
      //         this.shuiYaNum = val
      //         this.setRegister4HighValue({stateData:this.stateData[4].data,starRag:54,regValue:val/10})
      //       }
      //   }
      //
      // }

    },
    methods: {
      ...mapMutations(['WTGSTATE', 'TOTLECALLBACK', 'setRegisterBitValue','WTGSTATE','setRegister4LowValue',
        'setRegister4HighValuebefore',
        'setRegister4HighValue',
        'setRegister4LowValuebefore'
      ]),
      showRoundDiv(id){
        this.roundDivStyle.map((s)=>{
          s.border="";
        })
        switch(id){
          case 'zuoDianWenDu':
            this.roundDivStyle[0].border = "1px solid #fff";
            break
          case 'shuiWen':
            this.roundDivStyle[1].border = "1px solid #fff";
            break
          case 'penZuiWeiZhi':
            this.roundDivStyle[2].border = "1px solid #fff";
            break
          case 'hongGanWenDu':
            this.roundDivStyle[3].border = "1px solid #fff";
            break
          case 'shuiYa':
            this.roundDivStyle[4].border = "1px solid #fff";
            break
        }
      },
      goBack(){
        window.hilink.setTitleVisible(true)
        this.$router.go(-1)
      },
      Testclick(){
        alert('A')
      },
      goPath(pa){
        this.$router.push({path:'/yunqi'})
      },
      initData(){
        if(this.IsInitNum==false){
          this.zuoDianWenDuNum = Register.getRegister4HighValuebefore(this.stateData[53-this.startAddr].data)*10
          this.shuiWenNum = Register.getRegister4HighValue(this.stateData[53-this.startAddr].data)*10
          this.penZuiWeiZhiNum = Register.getRegister4LowValuebefore(this.stateData[53-this.startAddr].data)*10
          this. hongGanWenDuNum = Register.getRegister4LowValue(this.stateData[53-this.startAddr].data)*10
          this.shuiYaNum = Register.getRegister4HighValue(this.stateData[54-this.startAddr].data)*10
          this.IsInitNum = true
          this.NowchooseName = 'zuoDianWenDu'
          this.roundDivStyle[0].border = "1px solid #fff"
          this.initSetIng = true
          if(this.zuoDianWenDuNum==0){
            this.initSetIng = false
          }
          this.CtrlState = this.zuoDianWenDuNum
          this.preGun = this.zuoDianWenDuNum * 2
        }

        var srcimgTrue = "";
        if (this.zaozuo === false) {
          srcimgTrue = "change";
        }
        this.zaozuo = Register.getRegisterBitValue(this.stateData[8].data,58,13)
        if (this.zaozuo === true){
          if (srcimgTrue === 'change'){
            this.opclassName = 'Tzaozuo'
          }
        } else{
          this.opclassName = 'Wzaozuo'
        }

        this.tunXi = Register.getRegisterBitValue(this.stateData[0].data,50,9)

        this.fuXi = Register.getRegisterBitValue(this.stateData[0].data,50,10)

        this.tongBian = Register.getRegisterBitValue(this.stateData[0].data,50,8)

        this.wangFuAnMo = Register.getRegisterBitValue(this.stateData[0].data,50,15)

        this.hongGan = Register.getRegisterBitValue(this.stateData[0].data,50,3)

        this.wuHua = Register.getRegisterBitValue(this.stateData[0].data,50,2)


        if (this.fuXi==true || this.tunXi==true) {
          this.ActiveWanfu = ""
        } else {
          this.ActiveWanfu = "ActiveWanfu"
        }

        if(this.tunXi==true && this.wangFuAnMo==false) {
          this.opclassName = "tunXi"
          this.whichOp = "tunXi"
          this.srcImgPath = tunxiPng
        } else if(this.fuXi==true && this.wangFuAnMo==false){
          this.opclassName = "fuXi"
          this.whichOp = "fuXi"
        } else if(this.tongBian==true){
          this.opclassName = "tongBian"
          this.whichOp = "tongBian"
        } else if(this.wangFuAnMo==true) {
          this.opclassName = "wangFuAnMo"
          this.whichOp = "wangFuAnMo"
        } else if(this.hongGan==true){
          this.opclassName = "hongGan"
          this.whichOp = "hongGan"
        } else if(this.wuHua==true){
          this.opclassName = "wuHua"
          this.whichOp = "wuHua"
        } else {
          // this.showLoading = false
          if (this.zaozuo==true){
            this.opclassName = "Tzaozuo"
            this.srcImgPath = avataryiZZ
          } else{
            this.opclassName = "Wzaozuo"
            this.srcImgPath = avatarweiZZ
          }
        }

        if (this.zaozuo===false) {
          if (this.fuXi===true) {
            this.opclassName = "fuXi"
          } else if(this.tunXi==true){
            this.opclassName = "tunXi"
          }
        }

      },
      start(e){
        document.getElementById("range").disabled = false
        var val = e.changedTouches[0].target.value
        this.startData = val
        // var val = e.changedTouches[0].target.value
        // if(val>=0&&val<=4){
        //   val = 0
        // } else if(val>=5&&val<=14){
        //   val = 10
        // }else if(val>=15&&val<=24){
        //   val = 20
        // }else if(val>=25&&val<=34){
        //   val = 30
        // }else if(val>=35&&val<=44){
        //   val = 40
        // }else if(val>=45&&val<=50){
        //   val = 50
        // }
        //
        // this.CtrlState = val
        // this.preGun = val * 2
        // if (this.NowchooseName === 'zuoDianWenDu') {
        //   this.zuoDianWenDuNum = val
        //   this.setRegister4HighValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
        // } else if (this.NowchooseName === 'penZuiWeiZhi') {
        //   this.penZuiWeiZhiNum = val
        //   this.setRegister4LowValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
        // } else if (this.NowchooseName === 'shuiWen') {
        //   this.shuiWenNum = val
        //   this.setRegister4HighValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
        // } else if (this.NowchooseName === 'hongGanWenDu') {
        //   this.hongGanWenDuNum = val
        //   this.setRegister4LowValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
        // } else if (this.NowchooseName === 'shuiYa') {
        //   this.shuiYaNum = val
        //   this.setRegister4HighValue({stateData:this.stateData[4].data,starRag:54,regValue:val/10})
        // }
      },
      move(e){
        // var val = e.path[0].value
        var val = e.changedTouches[0].target.value
        this.preGun = val * 2
      },
      end(e){
        if(this.isIOS==false){
          document.getElementById("range").disabled = true
        }
        // var val = e.path[0].value
        var val = e.changedTouches[0].target.value
        if(val<5){
          val = 0
        } else if(val>=5&&val<15){
          val = 10
        }else if(val>=15&&val<25){
          val = 20
        }else if(val>=25&&val<35){
          val = 30
        }else if(val>=35&&val<45){
          val = 40
        }else if(val>=45){
          val = 50
        }
        this.preGun = val * 2

        // if(this.CtrlState==val){
        //   return
        // }
        this.CtrlState = val
          if (this.NowchooseName === 'zuoDianWenDu') {
            this.zuoDianWenDuNum = val
            this.setRegister4HighValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
          } else if (this.NowchooseName === 'penZuiWeiZhi') {
            this.penZuiWeiZhiNum = val
            this.setRegister4LowValuebefore({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
          } else if (this.NowchooseName === 'shuiWen') {
            if (val === 50 && this.opclassName === "tongBian") {
              this.IsshuiwenAlert = true
              this.CtrlState = this.startData
              this.preGun = this.startData * 2
              return
            }
            this.shuiWenNum = val
            this.setRegister4HighValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
          } else if (this.NowchooseName === 'hongGanWenDu') {
            this.hongGanWenDuNum = val
            this.setRegister4LowValue({stateData:this.stateData[3].data,starRag:53,regValue:val/10})
          } else if (this.NowchooseName === 'shuiYa') {
            this.shuiYaNum = val
            this.setRegister4HighValue({stateData:this.stateData[4].data,starRag:54,regValue:val/10})
          }

      },
      thermImage(id) {
        this.showRoundDiv(id)
        this.NowchooseName = id
        this.isWatchChange = true
        // clearTimeout(window.setIsWriteNuM)
        // }
        var CtrlstateTemp = 0
        switch (id) {
          case 'zuoDianWenDu':
            this.statusName = false;
            this.shuiWen = false;
            this.zuoDianWenDu = true;
            this.penZuiWeiZhi = false;
            this.hongGanWenDu = false;
            this.shuiYa = false;
            this.LastCtrlState = this.CtrlState
            CtrlstateTemp = Register.getRegister4HighValuebefore(this.stateData[53-this.startAddr].data)*10
            if(this.LastCtrlState!==CtrlstateTemp) {
              this.IsToWrite = false
            }
            this.isTowriteT = false
            this.CtrlState = this.zuoDianWenDuNum

            // window.setIsWriteNuM = setTimeout("window.setIsWrite()",10)
            break
          case 'shuiWen':
            this.statusName = false;
            this.shuiWen = true;
            this.zuoDianWenDu = false;
            this.penZuiWeiZhi = false;
            this.hongGanWenDu = false;
            this.shuiYa = false;
            this.LastCtrlState = this.CtrlState
            CtrlstateTemp = Register.getRegister4HighValue(this.stateData[53-this.startAddr].data)*10
            if(this.LastCtrlState!==CtrlstateTemp) {
              this.IsToWrite = false
            }
            this.isTowriteT = false
            this.CtrlState = this.shuiWenNum

            // window.setIsWriteNuM = setTimeout("window.setIsWrite()",10)
            break
          case 'penZuiWeiZhi':
            this.statusName = false;
            this.shuiWen = false;
            this.zuoDianWenDu = false;
            this.penZuiWeiZhi = true;
            this.hongGanWenDu = false;
            this.shuiYa = false;
            this.LastCtrlState = this.CtrlState
            CtrlstateTemp = Register.getRegister4LowValuebefore(this.stateData[53-this.startAddr].data)*10
            if(this.LastCtrlState!==CtrlstateTemp) {
              this.IsToWrite = false
            }
            this.isTowriteT = false
            this.CtrlState = this.penZuiWeiZhiNum

            // window.setIsWriteNuM = setTimeout("window.setIsWrite()",10)
            break
          case 'hongGanWenDu':
            this.statusName = false;
            this.shuiWen = false;
            this.zuoDianWenDu = false;
            this.penZuiWeiZhi = false;
            this.hongGanWenDu = true;
            this.shuiYa = false;
            this.LastCtrlState = this.CtrlState
            CtrlstateTemp = Register.getRegister4LowValue(this.stateData[53-this.startAddr].data)*10
            if(this.LastCtrlState!==CtrlstateTemp) {
              this.IsToWrite = false
            }
            this.isTowriteT = false
            this.CtrlState = this.hongGanWenDuNum

            // window.setIsWriteNuM = setTimeout("window.setIsWrite()",10)
            break
          case 'shuiYa':
            this.statusName = true;
            this.shuiWen = false;
            this.zuoDianWenDu = false;
            this.penZuiWeiZhi = false;
            this.hongGanWenDu = false;
            this.shuiYa = true;
            this.LastCtrlState = this.CtrlState
            CtrlstateTemp = Register.getRegister4HighValue(this.stateData[54-this.startAddr].data)*10
            if(this.LastCtrlState!==CtrlstateTemp) {
              this.IsToWrite = false
            }
            this.isTowriteT = false
            this.CtrlState = this.shuiYaNum

            // window.setIsWriteNuM = setTimeout("window.setIsWrite()",10)
            break
        }
        this.preGun = this.CtrlState * 2
      },
      // 操作部分
      closeTip(){
        this.alertZZ = false;
      },
      closeTipW (){
        this.IsWanfanAlter = false
      },
      closeTipShuiw (){
        this.IsshuiwenAlert = false
      },
      closeTipShuiwTongbian(){
        this.IsshuiwenTongbianAlert = false
      },

      changeImage(id) { //点击更换图标 当前点击内容
        if(this.ConnectStatus==false) {
          return
        }
        if(this.zaozuo==false) {
          this.alertZZ = true
          return
        }
        this.qieHuanCheck = true

        if (id === "tongBian") {
          if(this.shuiWenNum === 50){
            this.IsshuiwenTongbianAlert = true
            return
          }
        }

        if(id=="wangFuAnMo"){

        } else{
          // this.opclassName = id
          // this.srcImgPath = "./static/img/charmAnimation/" + id + "/" + id + "1.png"
        }

        switch (id)
        {
          case 'tunXi':
            if (this.tunXi == true) {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:9,val:0})
              this.tunXi = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }
            } else {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:9,val:1})
              this.tunXi = true
              this.opclassName = id
              this.srcImgPath = tunxiPng
            }
            break
          case 'fuXi':
            if (this.fuXi == true) {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:10,val:0})
              this.fuXi = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }

            } else {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:10,val:1})
              this.fuXi = true
              this.opclassName = id
              this.srcImgPath = fuxiPng
            }
            break
          case 'tongBian':
            if (this.tongBian == true) {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:8,val:0})
              this.tongBian = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }
            } else {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:8,val:1})
              this.tongBian = true
              this.opclassName = id
              this.srcImgPath = tongBianPng
            }
            break
          case 'wangFuAnMo':
            if (this.wangFuAnMo == true) {
                this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:15,val:0})
              this.wangFuAnMo = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }
              if(this.tunXi==true) {
                this.opclassName = 'tunXi'
                this.srcImgPath = tunxiPng
              } else {
                this.opclassName = 'fuXi'
                this.srcImgPath = fuxiPng
              }
            } else {
              if(this.tunXi==true||this.fuXi==true){
                this.opclassName = id

                this.srcImgPath = wangFuAnMoPng

                this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:15,val:1})
                this.wangFuAnMo = true
              } else{
                this.IsWanfanAlter = true
                return
              }
            }
            break
          case 'hongGan':
            if (this.hongGan == true) {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:3,val:0})
              this.hongGan = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }
            } else {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:3,val:1})
              this.hongGan = true
              this.opclassName = id
              this.srcImgPath = hongGanPng
            }
            break
          case 'wuHua':
            if (this.wuHua == true) {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:2,val:0})
              this.wuHua = false
              if (this.zaozuo==true){
                this.opclassName = "Tzaozuo"
              } else{
                this.opclassName = "Wzaozuo"
              }
            } else {
              this.setRegisterBitValue({stateData:this.stateData,starRag:50,regBit:2,val:1})
              this.wuHua = true
              this.opclassName = id
              this.srcImgPath = wuHuaPng
            }
            break
        }

        this.showLoading = true
        var self = this
        if(this.fuXi==true||this.tunXi==true) {
          if(id==='wangFuAnMo'){
            self.showLoading = false
          } else {
            window.wsetshowNUM = setTimeout('wSetShow()',11000)
          }
        } else {
          window.wsetshowNUM = setTimeout('wSetShow()',6000)
        }
        window.wSetShow = function () {
          self.showLoading = false
        }


      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,body{font-size:12px !important; background-color: white !important;}

  input[type=range]::-webkit-slider-thumb {
    height: 2rem !important;
    width: 2rem !important;
  }

  .ActiveWanfu {
    background-color: #efefef;
  }
  .yunqi{
    height: 100%;
    /*background-color: #4871cc;*/
    display: flex;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background: -webkit-linear-gradient(top, #4870cb 0%, #50adfb 84%);
  }
  .header{
    height: 20%;
  }
  .actions{
    height: 80%;
  }
  .action-plan{
    height: 35%;
    /*background: -webkit-linear-gradient(top, #4d96ea 0%, #50acfb 100%);*/
    background: rgba(0,0,0,0)!important;
  }
  .ConnectStatus{
    text-align: center;
    width: 100%;
    color: #FFF;
    font-size: 13px;
    opacity: 0.7;
  }
  .aui-barPailua{
    background: #ffffff;

  }
  .aui-grid {
    height: 55%;
  }
  .aui-grid [class*=aui-col-]{padding:0.5rem 0}
  .aui-title{
    z-index: 10000000;
    margin: 1.5rem 0 !important;
  }
  .aui-title p{
    font-size: 18px;
    color: #fff;
  }
  .headerDivIndex{
    height: 2rem;
    width: 100%;
    background-color: #288af0;
  }
  /*@media screen and (max-width:320px){*/
  /*body{font-size: 12px !important;}*/
  /*}*/
  /*@media screen and (min-width:321px) and (max-width:376px){*/
  /*body{font-size: 14px !important;}*/
  /*}*/
  /*@media screen and (min-width:377px) and (max-width:415px){*/
  /*body{font-size: 16px !important;}*/
  /*}*/
  /*选择菜单旋转*/
  @keyframes rotating{  /*背景部分动态*/
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }

  .Tzaozuo{
    background: url("../img/status/已着座.png") no-repeat !important;
    transform:scale(0.3);
    margin-top: -9rem !important;
    margin-left: -9rem !important;
  }
  .Wzaozuo{
    background: url("../img/status/未着座.png") no-repeat !important;
    transform:scale(0.3);
    margin-top: -9rem !important;
    margin-left: -9rem !important;
  }
  /*操作显示器部分动态*/
  @keyframes tunXi{
    0%{background: url("../img/charmAnimation/tunXi/tunXi1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/tunXi/tunXi2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/tunXi/tunXi3.png") no-repeat; transform: scale(0.5);}
    70%{background: url("../img/charmAnimation/tunXi/tunXi4.png") no-repeat; transform: scale(0.5);}
    90%{background: url("../img/charmAnimation/tunXi/tunXi5.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/tunXi/tunXi6.png") no-repeat; transform: scale(0.5);}
  }
  .tunXi{
    /*-webkit-animation:tunXi 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/tunxi.gif") no-repeat !important; transform: scale(0.5) !important;
  }
  @keyframes fuXi{
    0%{background: url("../img/charmAnimation/fuXi/fuXi1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/fuXi/fuXi2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/fuXi/fuXi3.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/fuXi/fuXi4.png") no-repeat; transform: scale(0.5);}
  }
  .fuXi{
    /*-webkit-animation:fuXi 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/fuxi.gif") no-repeat !important; transform: scale(0.5) !important;
  }
  @keyframes tongBian{
    0%{background: url("../img/charmAnimation/tongBian/tongBian1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/tongBian/tongBian2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/tongBian/tongBian3.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/tongBian/tongBian4.png") no-repeat; transform: scale(0.5);}
  }
  .tongBian{
    /*-webkit-animation:tongBian 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/tongbian.gif") no-repeat !important; transform: scale(0.5) !important;
  }
  @keyframes wangFuAnMo{
    0%{background: url("../img/charmAnimation/wangFuAnMo/wangFuAnMo1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/wangFuAnMo/wangFuAnMo2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/wangFuAnMo/wangFuAnMo3.png") no-repeat; transform: scale(0.5);}
    75%{background: url("../img/charmAnimation/wangFuAnMo/wangFuAnMo4.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/wangFuAnMo/wangFuAnMo5.png") no-repeat; transform: scale(0.5);}
  }
  .wangFuAnMo{
    /*-webkit-animation:wangFuAnMo 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/wanfuanmo.gif") no-repeat !important; transform: scale(0.5)!important;
  }
  @keyframes hongGan{
    0%{background: url("../img/charmAnimation/hongGan/hongGan1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/hongGan/hongGan2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/hongGan/hongGan3.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/hongGan/hongGan4.png") no-repeat; transform: scale(0.5);}
  }
  .hongGan{
    /*-webkit-animation:hongGan 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/honggan.gif") no-repeat !important; transform: scale(0.5) !important;
  }
  @keyframes wuHua{
    0%{background: url("../img/charmAnimation/wuHua/wuHua1.png") no-repeat; transform: scale(0.5);}
    25%{background: url("../img/charmAnimation/wuHua/wuHua2.png") no-repeat; transform: scale(0.5);}
    50%{background: url("../img/charmAnimation/wuHua/wuHua3.png") no-repeat; transform: scale(0.5);}
    75%{background: url("../img/charmAnimation/wuHua/wuHua4.png") no-repeat; transform: scale(0.5);}
    100%{background: url("../img/charmAnimation/wuHua/wuHua5.png") no-repeat; transform: scale(0.5);}
  }
  .wuHua{
    /*-webkit-animation:wuHua 2s linear infinite;*/
    margin-top: -11.4rem !important;
    margin-left: -11.4rem !important;
    background: url("../img/ml/wuhua.gif") no-repeat !important; transform: scale(0.5) !important;
  }
  /*html,body{font-size: 12px}*/
  .aui-bar-nav{
    height:2.25rem;
    z-index: 999999;
  }
  .imaui-bar {
    border-bottom: 0px solid #ccc !important;
  }
  .titleCss{
    position:absolute;
    bottom:-0.8rem;
    left:47%;
  }

  .cover{
    position:relative;
    /*margin-top: 2.48rem;*/
    height:100%;
    width:100%;
    /*background: -webkit-linear-gradient(top, #4871cc 0%, #4d98eb 100%);*/
    background: rgba(0,0,0,0)!important;
  }
  .aui-list-item-inner{
    height: 10%;
    display: flex;
    align-items: center;
    width: 100%;
    /*background: #4d96ea;*/
    /*margin-top: -1px;*/
    background: rgba(0,0,0,0)!important;
  }
  .aui-list-item-right{
    width: 100%;
  }
  .circleBg .img1aaa,.img2aaa{
    width: 13.8rem;
    height: 12rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6rem;
    margin-left: -6.9rem;
    -webkit-animation: second-half-show 20s linear infinite !important;
  }
  .circleBg .img1aaa{z-index: 10}
  .circleBg .img2aaa{z-index: 20}
  @keyframes second-half-show {
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  .circleBg .img3aaa{
    /*display:block;*/
    /*width:8rem;*/
    /*position:absolute;*/
    /*top:50%;*/
    /*left:50%;*/
    /*margin-top:-4rem;*/
    /*margin-left:-4rem;*/
    /*z-index: 99;*/
    /*-webkit-animation:second-half-show 20s linear infinite !important;*/

    display: block;
    /*width: 6rem;*/
    width: 9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin-top: -3rem;
    margin-left: -3rem;*/
    margin-top: -4.5rem;
    margin-left: -4.4rem;
    z-index: 99;
    -webkit-animation: second-half-show 20s linear infinite !important;
  }
  #covImgIn{
    background: url("../img/status/未着座.png") no-repeat;
    transform:scale(0.3);
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 999999;
    width: 20rem;
    height: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10rem;
    margin-left: -10rem;
  }
  .aui-range input[type='range']::-webkit-slider-thumb {  /*.滑块按钮颜色*/
    border:2px solid  #efefef;
    background-color: #fff;
  }
  #hid-range{  /*滑块部分样式*/
    width:20%;
    height: 0.18rem;
    border: 0;
    border-radius: 2px;
    background-color: #03a9f4;
    position: relative;
    top:0.85rem;
    z-index:100;
    -webkit-appearance: none !important;
  }
  .aui-content-padded{
    margin: 0 1rem 1rem 1rem;
    padding-top:1rem;
  }
  .divide{width:20%}
  /*.imgCenter{margin:auto;width:3rem;padding:0.5rem 0 0.2rem 0}*/

  /*  .listBorder{
      border-top:1px solid #ccc;
      border-right:1px solid #ccc;
    }*/
  .listBorder img{
    margin:auto;
    width:3rem;
  }
  .textColor{
    height: 310px;
    color: rgba(0,0,0,0.5);
    background: rgba(0,0,0,0)!important;
    /*bottom: 0px;
    position: fixed;*/
  }
  .textColor-Bluerrr{
    color:#288af0;
  }
  .aui-range input[type=range] {
    height: .2rem;
    border: 0;
    border-radius: 2px;
    background-color: #007dff !important;
    position: relative;
    -webkit-appearance: none!important;
  }
  input[type=range] {
    -webkit-appearance: none;
    width: 100% !important;
    background: -webkit-linear-gradient(#eee,#eee) no-repeat,#007dff;
    height: 3px;
  }

  /*横条样式*/
  /*input[type=range] {*/
  /*-webkit-appearance: none;!*清除系统默认样式*!*/
  /*width: 100% !important;*/
  /*!*background: -webkit-linear-gradient(rgb(3,169,244), rgb(221,221,221)) no-repeat, rgb(221,221,221);*!*/
  /*background: -webkit-linear-gradient(#EEEEEE,  #EEEEEE) no-repeat, #007DFF;*/
  /*!*设置左右宽度比例*!*/
  /*height: 3px;!*横条的高度*!*/
  /*}*/
  /*拖动块的样式*/
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;/*清除系统默认样式*/
    height: 26px;/*拖动块高度*/
    width: 26px;/*拖动块宽度*/
    /*background: #fff;!*拖动块背景*!*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
  }
  .aui-grid-label{
    padding-top: 0.5rem;
  }
  .aui-row{
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    align-items: center;
  }
  .listBorder{
    height: 50%;
    width: 33%;
    display: table;
    border-left: 0.5px solid #c9caca;
    border-bottom: 0.5px solid #c9caca;
  }
  .list-table{
    display: table-cell;
    vertical-align: middle;
  }
  .outcontianer{
    flex: 1;
    -webkit-box-flex: 1;
    height: calc(100% - 309px);
  }
  .aui-grid .aui-grid-label{
    font-size: 1.1rem!important;
  }
  .aui-flex-item-2 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
  }
  .divide .aui-grid-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
  }
  .roundDiv {
    width: 4rem;
    border-radius: 50%;
    /*border: 1px solid #fff;*/
    height: 4rem;
    margin: auto;
  }
  .aui-bar a{
    margin-left: 1.3rem;
  }
  .aui-padded-b-15 {
    padding: 9px 12px 0 12px;
  }
  .roundDiv img{
    width: 46px;
  }
</style>
